<template style="background-color: #f25244">
  <el-text>公主，你还有{{ store.lotteryTimes }}次翻牌机会</el-text>

  <div v-loading="imgLoading" :element-loading-text="process">
    <el-row v-for="row in rows" :gutter="20">
      <el-col v-for="n in row" :span="8">
        <draw-card :allow-circle="false" @reverseCard="callbackReverse()" :card-no="n">
          <template #front>
            <el-image :src="`/hongbao/pic_${n}.jpg`" :fit="'contain'" @load="counter++"></el-image>
          </template>
          <template #back>
            <div class="bold-layout">
              <el-text class="xs-1">{{store.luckyTokens.length>0? store.luckyTokens[n-1].token : 'none'}}</el-text>
            </div>
          </template>
        </draw-card>

      </el-col>
    </el-row>
    <audio ref="audioRef" src="/cute_touch.mp3"></audio>


    <el-row justify="end" style="margin-top: 5px">
      <el-col style="right: 0; position: absolute">
<!--        <el-button @click="clickBackward">上一步</el-button>-->
        <el-button type="success" @click="clickForward">下一步</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import {ref, computed, onMounted } from 'vue'
import DrawCard from "@/components/luckydraw/DrawCard.vue";
import {store} from "@/store.js";
import axios from "axios";
import {ElMessage} from "element-plus";
const rows = ref([
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
])

const audioRef = ref(null)
let counter = ref(0);
let imgLoading = computed(() => {
  return counter.value !== 9
})
let process = computed(() => {
  return Math.floor(counter.value / 9 * 100) + '%'
})

function clickForward() {
  store.forward()
  audioRef.value.play()
}

function clickBackward() {
  store.backward()
  audioRef.value.play()
}

function callbackReverse() {
  audioRef.value.play()
}



/** 获取红包token */
onMounted(() => {
  console.log(`store.luckySecret:${store.luckySecret}`)
  axios.post('/api/configurations/tokens', {
    payload: store.luckySecret
  }).then(res => {
    if (res.data.code === 0) {
      console.log(`res.data.data: ${res.data.data}`)
      for (const o of res.data.data) {
        console.log(o)
        store.updateTokenByIndex(o.index, o)

      }
    } else {
      ElMessage({
        showClose: false,
        message: '你好像走错路了...',
        type: 'error'
      })
    }
  }).catch(e => {
    ElMessage({
      showClose: false,
      message: '服务繁忙...',
      type: 'error'
    })
  })
})

</script>

<style>
.el-col {
  border-radius: 30px;
}

.bold-layout {
  background-color: #79bbff;
  height: 100px;
}
</style>